import { View, Text, StyleSheet, FlatList, Image, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';

const products = [
  { id: '1', name: '簡約陶瓷杯', price: '$22', image: require('../../assets/logo.png') },
  { id: '2', name: '和風香氛蠟燭', price: '$38', image: require('../../assets/logo.png') },
  { id: '3', name: '極簡帆布袋', price: '$45', image: require('../../assets/logo.png') },
  { id: '4', name: '日式竹編籃', price: '$55', image: require('../../assets/logo.png') },
];

export default function ShopScreen() {
  const router = useRouter();
  return (
    <View style={styles.container}>
      {/* Header Bar */}
      <View style={styles.headerBar}>
        <TouchableOpacity onPress={() => router.back()}>
          <Text style={styles.backText}>←</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>商品探索</Text>
        <View style={{ width: 24 }} /> {/* 佔位對齊中間標題 */}
      </View>

      <FlatList
        data={products}
        keyExtractor={(item) => item.id}
        numColumns={2}
        columnWrapperStyle={{ justifyContent: 'space-between' }}
        contentContainerStyle={{ paddingBottom: 100 }}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => router.push('./product_details')} style={styles.card}>
            <Image source={item.image} style={styles.image} />
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.price}>{item.price}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    paddingHorizontal: 16,
  },
  headerBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 20,
  },
  backText: {
    fontSize: 20,
    color: '#333',
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
  },
  card: {
    backgroundColor: '#f9f9f9',
    borderRadius: 12,
    padding: 12,
    width: '48%',
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  image: {
    width: '100%',
    height: 140,
    borderRadius: 12,
    marginBottom: 10,
  },
  name: {
    color: '#333',
    fontSize: 14,
    fontWeight: '500',
    marginBottom: 4,
  },
  price: {
    color: '#777',
    fontSize: 13,
  },
});
